<template>
  <div class="server-main">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
      <el-form-item class="dynamic-item" v-for="item in dynamicValidateForm.infos" :key="item.id">
        <el-input v-model="item.value" :disabled="!!recommendId" placeholder="请输入异常信息"></el-input>
        <el-button type="danger" :disabled="!!recommendId" @click.prevent="removeUnusualInfo(item)">删除</el-button>
      </el-form-item>
      <el-form-item class="item">
        <el-button type="primary" :disabled="!!recommendId" @click="addUnusualInfo">新增</el-button>
      </el-form-item>
    </el-form>

    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text"></span>
        <div>
          <el-button type="primary" size="small" :disabled="!!recommendId" @click="schemeRec">方案推荐</el-button>
        </div>
      </div>
      <el-table :data="tableList" class="km-table">
        <el-table-column prop="exceptionMessage" label="异常信息" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="repairPlans" label="修复方案" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <p v-for="(item, index) in scope.row.repairPlans" v-bind:key="index">
              {{ `${index + 1}、${item}` }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="useMode" label="推荐模型" align="center" show-overflow-tooltip></el-table-column>
      </el-table>
      <!-- <el-pagination background layout="prev, pager, next" :total="total" :hide-on-single-page="!total"
        :page-size="modelData.pageSize" :pager-count="11" :current-page="modelData.pageNum" prev-text="上一页"
        next-text="下一页" @current-change="handleCurrentChange">
      </el-pagination> -->
    </div>
  </div>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from "vuex";
  export default {
    name: "intelligenceRec",
    components: {},
    data: () => {
      return {
        recommendId: null,
        dynamicValidateForm: {
          infos: [{
            value: "",
            // id: 0, // 可写可不写
          }, ],
        },
        ontologySpoId: "", // 节点 id
        propertyId: "", // 属性 id
        modelData: {
          name: "", // 需求内容
          modelSortState: "2", // 状态 0 启用，1禁用，2全部
          pageNum: 1, // 页码
          pageSize: 10, // 每页条数
        },
        tableList: [], // 本体类别列表
        total: 0, // 数据总条数
      };
    },
    computed: {
      ...mapState({
        containerDom: (state) => state.server.containerDom,
      }),
    },
    // watch: {
    //   "$route": {
    //     handler: function (newVal, oldVal) {
    //       if (this.dynamicValidateForm.infos.length > 1) {
    //         this.showBtn = true;
    //       } else {
    //         this.showBtn = false;
    //       }
    //     },
    //     immediate: true
    //   }
    // },
    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //     console.log("vm", vm.total);
    //   });
    // },
    beforeRouteLeave(to, from, next) {
      localStorage.removeItem(
        "info",
        JSON.stringify(this.dynamicValidateForm.infos)
      );
      localStorage.removeItem("exceptionId", JSON.stringify(this.exceptionId));
      next();
    },
    mounted() {
      const {
        from,
        useMode,
        recommendId
      } = this.$route.query;
      console.log("this.$route.query", this.$route.query);
      if (from === "intelligence" || from === "modelManagementResultCheck") {
        this.useMode = useMode;
        this.recommendId = recommendId;
        if (this.recommendId) {
          this.getTableList();
        }
      } else {
        console.log("loc", JSON.parse(localStorage.getItem("info")));
        console.log(
          "loc",
          JSON.parse(localStorage.getItem("exceptionId")) === null
        );
        this.dynamicValidateForm.infos = JSON.parse(localStorage.getItem("info"));
        if (JSON.parse(localStorage.getItem("exceptionId"))) {
          this.schemeRec();
        }
      }
    },
    methods: {
      // 新增异常信息
      addUnusualInfo() {
        this.dynamicValidateForm.infos.push({
          value: "",
          id: Date.now(),
        });
      },

      removeUnusualInfo(item) {
        let index = this.dynamicValidateForm.infos.indexOf(item);
        if (index !== -1) {
          this.dynamicValidateForm.infos.splice(index, 1);
        }
      },

      // 获取本体模型属性列表
      async getTableList() {
        let params = {
          recommendId: this.recommendId,
        };
        let res = await this.$axios.post(
          this.$api.repaireSchemeRec.zehaoObj.selectByRecommendId,
          params
        );
        if (res.data.code !== 200) {
          this.$message.warning(res.data.message);
          return;
        }
        this.total = res.data.data.length;
        let arr = [];
        res.data.data.forEach((item) => {
          arr.push({
            value: item.exceptionMessage,
            id: item.detailId,
          });
          item.useMode = this.useMode;
          return item;
        });
        this.dynamicValidateForm.infos = arr;
        this.tableList = res.data.data;
      },

      // 查询
      onSubmit(pageNum) {
        this.modelData.pageNum = pageNum ? pageNum : this.modelData.pageNum;
      },
      // 修改当前页码
      handleCurrentChange(page) {
        this.modelData.pageNum = page;
      },

      // 修复方案推荐
      async schemeRec() {
        // 点击方案推荐后禁止新增/删除异常信息
        this.recommendId = -1;
        let message = this.dynamicValidateForm.infos.map((item) => {
          return item.value;
        });
        let params = {
          exception_list: message,
        };
        let res = await this.$axios.post(
          this.$api.repaireSchemeRec.zehaoObj.exceptionRecommend,
          params
        );
        if (res.data.code !== 200) {
          this.$message.warning(res.data.message);
          this.recommendId = null;
          return;
        }
        this.total = res.data.data.length;
        this.tableList = res.data.data;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .server-main {
    position: relative;

    .demo-dynamic {
      background: #ffffff;
      border-radius: 4px;
      padding: 16px 32px;

      .dynamic-item ::v-deep .el-form-item__content {
        display: flex;

        .el-input {
          margin-right: 20px;
        }
      }

      .item {
        margin: 0 auto;
        display: flex;
        justify-content: center;
      }
    }

    .form-input ::v-deep .el-input {
      width: 250px;
      margin-right: 20px;
    }

    .server-table {
      margin-top: 16px;
      padding: 16px 32px 64px;
      background: #ffffff;
      border-radius: 4px;

      .table-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title-text {
          margin: 8px 0;
          font-size: 16px;
          line-height: 16px;
          border-left: 5px solid $--color-primary;
          padding-left: 10px;
        }

        margin-bottom: 10px;
      }
    }

    .ontology-edit {
      padding: 0 10px;

      &+.ontology-edit {
        border-left: 1px solid #dddddd;
      }
    }

    ::v-deep .el-table__append-wrapper {
      padding: 10px;
    }

    ::v-deep .el-dialog {
      width: 500px;
      border-radius: 5px;
    }

    .dialog-inline {
      ::v-deep .el-form-item__content {
        width: 300px;
      }

      button.el-button {
        background-color: $--color-primary !important;
        color: #fff !important;
        line-height: 1.2;
      }
    }
  }
</style>